<template>
  <div>
    <span class="view-link" @click="previewHandler">预览</span>
  </div>
</template>
<script lang="ts" setup>
import { ElMessage } from "element-plus";
const props = defineProps({
  fileUrl: {
    type: String,
    default: "",
  },
  isPreview: {
    type: Boolean,
    default: true,
  },
});
// 文件预览
const previewHandler = () => {
  if (props.isPreview) {
    const _path = props.fileUrl.replace("https", "http");
    const filename: any = props.fileUrl.split("/").pop();
    const fileExtension = filename.split(".").pop().toLowerCase();
    const imageExtensions = ["jpg", "jpeg", "png", "gif"];
    if (imageExtensions.includes(fileExtension)) {
      window.open(_path, "_blank");
    } else if (fileExtension == "pdf") {
      window.open(
        "http://www.pfile.com.cn/api/profile/onlinePreview?url=" +
          encodeURIComponent(_path),
        "_blank"
      );
    } else {
      window.open(
        `https://view.officeapps.live.com/op/view.aspx?src=${_path}&wdOrigin=BROWSELINK`,
        "_blank"
      );
    }
  } else {
    ElMessage("该文件格式不支持在线预览，请下载后查看");
  }
};
</script>
<style lang="scss" scoped>
.view-link {
  cursor: pointer;
  color: #0079fe;
}
</style>
